<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #ccc;
            position: absolute;
        }
    </style>
    <script type="text/babel">
        function tryConvert(temperature, convert) {
            const input = parseFloat(temperature);
            if (Number.isNaN(input)) {
                return '';
            }
            const output = convert(input);
            const rounded = Math.round(output * 1000) / 1000;
            return rounded.toString();
        }

        function BoilingVerdict(props) {
            if (props.celsius >= 100) {
                return <p>The water would boil.</p>;
            }
            return <p>The water would not boil.</p>;
        }

        function toCelsius(fahrenheit) {
            return (fahrenheit - 32) * 5 / 9;
        }

        function toFahrenheit(celsius) {
            return (celsius * 9 / 5) + 32;
        }

        const scaleNames = {
            c: 'Celsius',
            f: 'Fahrenheit'
            };

            class TemperatureInput extends React.Component {
            constructor(props) {
                super(props);
                this.handleChange = this.handleChange.bind(this);
                this.state = {temperature: ''};
            }

            handleChange(e) {
                this.setState({temperature: e.target.value});
            }

            render() {
                const temperature = this.state.temperature;
                const scale = this.props.scale;
                return (
                <fieldset>
                    <legend>Enter temperature in {scaleNames[scale]}:</legend>
                    <input value={temperature}
                        onChange={this.handleChange} />
                </fieldset>
                );
            }
        }

        class Calculator extends React.Component {
            constructor(props) {
                super(props);
                this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
                this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
                this.state = {temperature: '', scale: 'c'};
            }

            handleCelsiusChange(temperature) {
                this.setState({scale: 'c', temperature});
            }

            handleFahrenheitChange(temperature) {
                this.setState({scale: 'f', temperature});
            }

            render() {
                const scale = this.state.scale;
                const temperature = this.state.temperature;
                const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
                const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

                return (
                <div>
                    <TemperatureInput
                    scale="c"
                    temperature={celsius}
                    onTemperatureChange={this.handleCelsiusChange} />

                    <TemperatureInput
                    scale="f"
                    temperature={fahrenheit}
                    onTemperatureChange={this.handleFahrenheitChange} />

                    <BoilingVerdict
                    celsius={parseFloat(celsius)} />

                </div>
                );
            }
        }


        window.onload = function () {
            var  oDiv = document.getElementById('root');

            ReactDOM.render(
                <Calculator/>,
                oDiv
            );
        }
    </script>
</head>
<body>
<div id="root"></div>
</body>
</html>